﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sliderRange2.aspx.cs" Inherits="sistemaAcademicoFinanceiroEscolas.sliderRange2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <%--<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/dot-luv/jquery-ui.css" />--%>
    <style>
        #slider-range
        {
            width: 400px;
        }
        #slider-range, #time
        {
            margin: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server">
    <div>
        <div id="slider-range">
        </div>
        <span id="time"></span>

        <script src="js/jquery.min.js" type="text/javascript"></script>

        <script src="js/jquery-ui.min.js"
            type="text/javascript"></script>
            
            
        <%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"
            type="text/javascript"></script>--%>

        <script type="text/javascript">
            $("#slider-range").slider({
                range: true,
                min: 300,
                max: 1389,
                values: [300, 420],
                slide: slideTime
            });
            function slideTime(event, ui) {
                var val0 = $("#slider-range").slider("values", 0),
					val1 = $("#slider-range").slider("values", 1),
					minutes0 = parseInt(val0 % 60, 10),
					hours0 = parseInt(val0 / 60 % 24, 10),
					minutes1 = parseInt(val1 % 60, 10),
					hours1 = parseInt(val1 / 60 % 24, 10);

                if (minutes0 > 15) {
                    minutes0 = 30;
                } else {
                    minutes0 = 0;
                }
                if (minutes1 > 15) {
                    minutes1 = 30;
                } else {
                minutes1 = 0;
                }

                startTime = getTime(hours0, minutes0);
                endTime = getTime(hours1, minutes1);
                $("#time").text(startTime + ' às ' + endTime);
            }
            function getTime(hours, minutes) {
                minutes = minutes + "";
                if (hours == 0) {
                    hours = 12;
                }
                if (minutes.length == 1) {
                    minutes = "0" + minutes;
                }
                return hours + ":" + minutes;
            }
            slideTime();
        </script>

    </div>
    </form>
</body>
</html>
